<template>
  <vab-card class="page-main" shadow="hover">
    <template #header>
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          <vab-icon icon="line-chart-line" />
          人员数据新增统计
        </div>
        <div style="flex: 1"></div>
        <div>
          <el-button style="margin-right: 5px" type="text" @click="reset()">
            恢复默认
          </el-button>
          <el-date-picker
            v-model="year"
            :clearable="false"
            format="YYYY年"
            placeholder="请选择年"
            style="width: 120px"
            type="year"
            value-format="YYYY"
            @change="getData(year)"
          />
        </div>
      </div>
    </template>
    <div v-loading="loading" class="echarts-box">
      <div id="myEcharts" :style="{ width: '100%', height: '200px' }"></div>
    </div>
  </vab-card>
</template>

<script>
  import {
    defineComponent,
    onMounted,
    onUnmounted,
    reactive,
    toRefs,
  } from 'vue'
  import { doStatisticsForEmpInsByYearSplitMonth } from '@/api/publicAuth'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'LineAddEmp',
    components: {},
    setup() {
      const state = reactive({
        year: '',
        nowYear: '',
        loading: true,
        xVal: [],
        yVal: [],
      })
      /// 声明定义一下echart
      let echart = echarts
      let options = {
        //标题
        title: {
          text: '',
        },
        //工具栏
        tooltip: {
          trigger: 'axis', //点触发，仅展示关节部分
        },
        legend: {
          data: [],
        },
        //图表边距
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        //下载为图片
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [],
      }
      const getData = async (year) => {
        if (
          options.series.filter((item) => item.name == year + '年').length > 0
        ) {
          return
        }
        state.loading = true
        const {
          data: { xVal, yVal },
        } = await doStatisticsForEmpInsByYearSplitMonth({ year: year })
        state.xVal = xVal
        state.yVal = yVal
        //向options赋值
        options.xAxis.data = state.xVal
        options.series.push({
          name: year + '年',
          type: 'line',
          data: state.yVal,
        })
        options.legend.data.push(year + '年')
        initChart()
        state.loading = false
      }

      const reset = async () => {
        const today = new Date()
        const year = today.getFullYear()
        state.nowYear = year + ''
        state.year = parseInt(year - 1) + ''
        options.xAxis.data = []
        options.series = []
        options.legend.data = []
        await getData(state.nowYear)
        await getData(state.year)
      }

      onMounted(async () => {
        const today = new Date()
        const year = today.getFullYear()
        state.nowYear = year + ''
        state.year = parseInt(year - 1) + ''
        await getData(state.nowYear)
        await getData(state.year)
      })

      onUnmounted(() => {
        echart.dispose()
      })

      // 基础配置一下Echarts
      function initChart() {
        let chart = echart.init(document.getElementById('myEcharts'), 'light')
        chart.clear() // 清除之前的数据，否则tootips不同步
        // 把配置和数据放这里
        chart.setOption(options)
        window.onresize = function () {
          //自适应大小
          chart.resize()
        }
      }

      return { initChart, ...toRefs(state), getData, reset }
    },
  })
</script>

<style>
  .page-main {
    width: 100%;
  }
  .el-card__header {
    height: 40px;
    padding: 4px 8px;
    line-height: 32px;
  }
</style>
